import { Canvas, Meta, Source } from '@storybook/blocks'

import * as BreadcrumbStories from './breadcrumb.stories'

<Meta of={BreadcrumbStories} />

# Breadcrumb

Displays the path to the current resource using a hierarchy of links.

## Preview

<Canvas of={BreadcrumbStories.Default} />

## Usage

export const importCode = `import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@orbitkit/ui/breadcrumb";`

export const usageCode = `<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
`

<Source code={importCode} language='ts' dark />
<Source code={usageCode} language='tsx' dark />

## Examples

### Custom Separator

Use a custom component as `children` for `<BreadcrumbSeparator />` to create a custom separator.

<Canvas of={BreadcrumbStories.CustomSeparator} />

### Dropdown

You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb.

<Canvas of={BreadcrumbStories.Dropdown} />

### Collapsed

A `<BreadcrumbEllipsis />` component is provided to show a collapsed state when the breadcrumb is too long.

<Canvas of={BreadcrumbStories.Collapsed} />
